<template>
  <!-- //!#3 ref 引用和 ref 属性进行绑定 -->
  <h1 ref="h1Ref">Hello 2022~</h1>
</template>

<script>
// 需求： ref 函数配合 ref 属性获取 DOM
import { ref, onMounted } from 'vue'
export default {
  setup() {
    // !#1 创建一个 ref 引用
    const h1Ref = ref(null)
    onMounted(() => {
      // !#4 通过 h1Ref.value 可以拿到 DOM 啦
      h1Ref.value.style.backgroundColor = 'pink'
    })
    // !#2 导出给模板中使用
    return {
      h1Ref,
    }
  },
}
</script>
